# Largest Contentful Paint (LCP)

The next scripts shows information about the [LCP](https://web.dev/lcp) metric.

> You can use it in the browser console or as a snippet in the Chrome DevTools Source tab, take a look at the [Introduction](/introduction/) section.

## Get the LCP element

List the Largest Contentful Paint in the console and add a green dotted line around the LCP element.

#### Snippet

```js copy
const po = new PerformanceObserver((list) => {
  let entries = list.getEntries();

  entries = dedupe(entries, "startTime");

  entries.forEach((item, i) => {
    console.dir(item);
    console.log(
      `${i + 1} current LCP item : ${item.element}: ${Math.max(item.startTime - getActivationStart(), 0)}`,
    );
    item.element ? (item.element.style = "border: 5px dotted lime;") : "";
  });

  const lastEntry = entries[entries.length - 1];
  console.log(`LCP is: ${Math.max(lastEntry.startTime - getActivationStart(), 0)}`);
});

po.observe({ type: "largest-contentful-paint", buffered: true });

function dedupe(arr, key) {
  return [...new Map(arr.map((item) => [item[key], item])).values()];
}

function getActivationStart() {
  const navEntry = getNavigationEntry();
  return (navEntry && navEntry.activationStart) || 0;
}

function getNavigationEntry() {
  const navigationEntry =
    self.performance &&
    performance.getEntriesByType &&
    performance.getEntriesByType('navigation')[0];

  if (
    navigationEntry &&
    navigationEntry.responseStart > 0 &&
    navigationEntry.responseStart < performance.now()
  ) {
    return navigationEntry;
  }
}
```
